import { useTranslations, useLocale } from 'next-intl';
import { Button } from '@/components/ui/button';
import { ArrowRight, BarChart3, Globe, Shield, Zap } from 'lucide-react';
import Link from 'next/link';
import { defaultLocale } from '@/i18n/config';

export default function HomePage() {
  const t = useTranslations('common');
  const dashboard = useTranslations('dashboard');
  const locale = useLocale();

  // 根据当前语言生成链接路径，默认语言不添加前缀
  const getLocalizedHref = (path: string) => {
    if (locale === defaultLocale) {
      return path;
    }
    return `/${locale}${path}`;
  };

  const features = [
    {
      icon: Globe,
      title: '多语言支持',
      description: '支持中文、英文、日语三种语言，轻松切换',
      titleEn: 'Multi-language Support',
      descriptionEn: 'Support Chinese, English, Japanese with easy switching',
      titleJa: '多言語サポート',
      descriptionJa: '中国語、英語、日本語をサポート、簡単切り替え',
    },
    {
      icon: Shield,
      title: '企业级安全',
      description: '完整的权限管理和数据安全保护',
      titleEn: 'Enterprise Security',
      descriptionEn: 'Complete permission management and data security',
      titleJa: 'エンタープライズセキュリティ',
      descriptionJa: '完全な権限管理とデータセキュリティ',
    },
    {
      icon: BarChart3,
      title: '数据分析',
      description: '实时数据统计和可视化分析',
      titleEn: 'Data Analytics',
      descriptionEn: 'Real-time statistics and visual analytics',
      titleJa: 'データ分析',
      descriptionJa: 'リアルタイム統計と視覚的分析',
    },
    {
      icon: Zap,
      title: '高性能',
      description: '基于Next.js构建，快速响应和优秀性能',
      titleEn: 'High Performance',
      descriptionEn:
        'Built with Next.js for fast response and excellent performance',
      titleJa: '高パフォーマンス',
      descriptionJa: 'Next.jsベースで高速レスポンスと優秀なパフォーマンス',
    },
  ];

  return (
    <div className="flex flex-col">
      {/* Hero Section */}
      <section className="from-primary/10 via-background to-secondary/10 bg-gradient-to-br px-4 py-20">
        <div className="container mx-auto text-center">
          <h1 className="from-primary to-primary/60 mb-6 bg-gradient-to-r bg-clip-text text-4xl font-bold text-transparent md:text-6xl">
            {t('welcome')}企业级前端模板
          </h1>
          <p className="text-muted-foreground mx-auto mb-8 max-w-3xl text-xl md:text-2xl">
            基于 React + Next.js + TypeScript 构建的现代化企业级应用模板，
            支持中英日三语国际化，集成 Shadcn/ui 组件库
          </p>
          <div className="flex flex-col justify-center gap-4 sm:flex-row">
            <Link href={getLocalizedHref('/dashboard')}>
              <Button size="lg" className="px-8 text-lg">
                {dashboard('title')}
                <ArrowRight className="ml-2 h-5 w-5" />
              </Button>
            </Link>
            <Link href={getLocalizedHref('/about')}>
              <Button variant="outline" size="lg" className="px-8 text-lg">
                {t('about')}
              </Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="px-4 py-20">
        <div className="container mx-auto">
          <div className="mb-16 text-center">
            <h2 className="mb-4 text-3xl font-bold md:text-4xl">核心特性</h2>
            <p className="text-muted-foreground text-xl">
              为现代企业应用提供完整的解决方案
            </p>
          </div>

          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
            {features.map((feature, index) => {
              const Icon = feature.icon;
              return (
                <div
                  key={index}
                  className="bg-card rounded-lg border p-6 transition-shadow hover:shadow-lg"
                >
                  <div className="bg-primary/10 mb-4 flex h-12 w-12 items-center justify-center rounded-lg">
                    <Icon className="text-primary h-6 w-6" />
                  </div>
                  <h3 className="mb-2 text-xl font-semibold">
                    {feature.title}
                  </h3>
                  <p className="text-muted-foreground">{feature.description}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="bg-muted/50 px-4 py-20">
        <div className="container mx-auto">
          <div className="grid grid-cols-1 gap-8 text-center md:grid-cols-3">
            <div>
              <div className="text-primary mb-2 text-4xl font-bold">3</div>
              <div className="text-muted-foreground text-lg">支持语言</div>
            </div>
            <div>
              <div className="text-primary mb-2 text-4xl font-bold">10+</div>
              <div className="text-muted-foreground text-lg">UI 组件</div>
            </div>
            <div>
              <div className="text-primary mb-2 text-4xl font-bold">100%</div>
              <div className="text-muted-foreground text-lg">TypeScript</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="px-4 py-20">
        <div className="container mx-auto text-center">
          <h2 className="mb-4 text-3xl font-bold">开始使用企业级模板</h2>
          <p className="text-muted-foreground mb-8 text-xl">
            立即体验现代化的企业级前端开发
          </p>
          <div className="flex flex-col justify-center gap-4 sm:flex-row">
            <Button size="lg">{t('register')}</Button>
            <Button variant="outline" size="lg">
              {t('contact')}
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}
